<template>
	<view>
		<view class="topImg">废旧金属收购登记系统</view>
		<view class="addListStyle">
			<view class="allList">
				<view v-for="(item,index) in addList" :key="index" class="oneList">
					<view class="one">
						名称：{{item.threeName}}
					</view>
					<view class="one">
						金属种类：{{item.oneName}}
					</view>
					<view class="one">
						分类：{{item.twoName}}
					</view>
					<view class="one">
						重量：{{item.weight}}
					</view>
					<view class="one">
						图片：
					<u-popup v-model="showImg" mode="center">
						<image :src="imgUrl" style="width: 90vw;height: 50vh;" mode="aspectFit"></image>
					</u-popup>
					<image @tap="scan(items)":src="items" v-for="(items,i) in item.picture" style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" :key="i" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="title">客户信息</view>
		<view class="formClass">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名:" prop="name" label-width='100' class="labelStyle">
					<u-input v-model="form.name" placeholder="选填" placeholder-style="font-size:24rpx;"/>
				</u-form-item>
				<u-form-item label="电话:" prop="number" label-width='100' class="labelStyle">
					<u-input v-model="form.number" maxlength="11"  placeholder="选填" placeholder-style="font-size:24rpx;"/>
				</u-form-item>
				<u-form-item label="身份证:" prop="address" label-width='120' class="labelStyle">
					<view class="labelStyle">
						<u-input v-model="form.address" placeholder="选填" placeholder-style="font-size:24rpx;"/>
						<!-- <image src="../../static/address.png" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image> -->
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="twoBtn">
			<view class="left" @tap="back">上一步</view>
			<view class="left" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				form: {
					number: '',
					name:'',
					address:"",
				},
				addList:[],
				showImg:false,
				imgUrl:"",
				rules: {
					name: [
						// 正则判断为汉字
						{
							pattern: /^[\u4e00-\u9fa5]{0,}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能输入汉字'
						},
					],
					number: [
						// 正则判断为手机号
						{
							min: 11, 
							max: 11,
							message: '手机号最多11位', 
							trigger: 'change'
						},
					],
					address: [
						// 正则判断为身份证
						{
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '身份证不正确'
						},
					],
				},
			}
		},
		onLoad(option) {
			this.addList = JSON.parse(option.list);
			this.addList.forEach((item,i)=>{
				if(this.addList[i].picture != ""){
					this.addList[i].picture = this.addList[i].picture.split(",");
				}
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow(){
			this.getToken();
		},
		methods: {
			scan(url){
				this.showImg = true;
				this.imgUrl = url;
			},
			getToken(){
				uni.request({
					url: config.host + '/huishou/pcLogin/getAppLoginInfo', //接口地址。
					data: {
						token: uni.getStorageSync('token')
					},
					method: 'POST',
					header: {
						'content-type': 'application/json;charset=UTF-8'
					},
					success: (res) => {
						if(Object.keys(res.data.item).length == 0){
							uni.showToast({
								icon: 'none',
								title: '身份已过期，请重新登录！'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '../login/index'
								})
							}, 800);
							
						}else{
							
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: '网络异常,请稍后重试'
						});
					}
				});
			},
			back(){
				uni.navigateTo({
					url:"../addData/index?list="+JSON.stringify(this.addList)
				})
			},
			submit(){
				console.log(this.addList,"tijiao");
				let f = {
						items:this.addList,
						userName:this.form.name,
						userPhone:this.form.number,
						userIdCard:this.form.address,
						customer:uni.getStorageSync('userId')
					};
					console.log(f,'fff')
				this.addList.forEach((item,i)=>{
					if(this.addList[i].picture.length !=0 && this.addList[i].picture != []){
						this.addList[i].picture = this.addList[i].picture.join(",")
					}
				})
				this.$refs.uForm.validate(valid => {
						if (valid) {
							uni.request({
								url: config.host + '/huishou/scrapinformation/add ', //接口地址。
								data: {
									items:this.addList,
									userName:this.form.name,
									userPhone:this.form.number,
									userIdCard:this.form.address,
									customer:uni.getStorageSync('userId')
								},
								method: 'POST',
								header: {
									'content-type': 'application/json;charset=UTF-8'
								},
								success: (res) => {
									console.log(res,"200")
									if (res.data.code == 200) {
										uni.showToast({
											icon:"none",
											title: res.data.message,
										});
										setTimeout(() => {
											uni.navigateTo({
												url: '../record/index?route='+"info"
											})
										}, 300);
									} 
								},
								fail: (err) => {
									uni.showToast({
										icon: 'none',
										title: '网络异常,请稍后重试'
									});
								}
							});
						} else {
							
						}
					});
				
				
				
				
			}
		}
	}
</script>

<style lang="scss">
	@import url("./css/index.css");
</style>
